<template>
  <div class="report">
    <div class="report_main">
      <!-- <div class="taberBox">
        <div class="topbar">
          <div>淘宝高佣选品库</div>
          <div>商家合作 帮助中心 申诉成功 放单后台</div>
        </div>
      </div> -->
      <!-- <div class="titleBox">
        <div class="title">高佣黑名单/举报</div>
        <div class="titleX">
          <hr />
          <div>X</div>
        </div>
      </div> -->
      <div class="report_info">
        <div class="report_box">
          <div class="report_top">
            <el-card class="box-card" :body-style="{ padding: '15px' }">
              <div slot="header" class="clearfix">
                <span style="font-size:20px;color:blue">我要举报/</span>
                <span>My report</span>
              </div>
              <div class="rule_box">
                <p class="ruletop">举报规则</p>
                <p>
                  1.举报必须提供有效的合作证据截图，截图请截完整聊天界面大图，不能打马赛克;不能提供完整有效合作截图不予处理。
                </p>
                <p>
                  2.只接受商家恶意微信、QQ拉人，数据量大不结算服务费等严重损害淘客利益的情况举报;证据不足或胡乱举报的直接忽略，不予处理。
                </p>
                <p>
                  3.推广不出量，少量服务费不给，就举报的不处理;推广不出量，请跟商家多沟通，价格或佣金给力-点;
                  100元以下不予处理。
                </p>
                <p>
                  4.优惠券失效，走低佣等普通情况，请在前台鼠标进去商品块时，点击右下角举报按钮进行举报，请勿乱举报。
                </p>
                <p>
                  5.恶意竞争乱举报的，视情节严重，取消举报资格、冻结或封号处理:在保障淘客权益的同时，需要大家-起维护健
                  康的淘客生态圈。
                </p>
                <p class="ruletop">注意事项:</p>
                <p>1.举报商家/宝贝，该账号定要在高佣选品库 上传过宝贝:</p>
                <p>
                  2.举报商家/宝贝，一定要有券数据截图，以及说明商家拒绝支付多少钱:
                </p>
              </div>
            </el-card>
            <br />
            <el-card class="box-card" :body-style="{ padding: '15px' }">
              <div slot="header" class="clearfix">
                <span style="font-size:20px;color:black">举报内容</span>
              </div>
              <div class="report_fillin">
                <div class="report_form">
                  <el-form
                    ref="form"
                    :model="form"
                    label-width="150px"
                    label-position="left"
                  >
                    <el-form-item label="举报对象:">
                      <el-radio-group v-model="form.type" @change="objchange">
                        <el-radio label="1">宝贝</el-radio>
                        <el-radio label="2">商家</el-radio>
                        <el-radio label="3">淘客</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      label="要举报的宝贝链接:"
                      v-if="form.type === '1'"
                    >
                      <el-input
                        v-model="form.goods_url"
                        placeholder="请输入要举报的宝贝链接"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="合作的优惠卷链接:"
                      v-if="form.type === '1'"
                    >
                      <el-input
                        v-model="form.coupon_url"
                        placeholder="请输入合作的优惠卷链接"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="店铺掌柜名:" v-if="form.type === '2'">
                      <el-input
                        v-model="form.shop_name"
                        placeholder="请输入店铺掌柜名"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="合作的宝贝链接"
                      v-if="form.type === '2'"
                    >
                      <el-input
                        v-model="form.goods_url"
                        placeholder="请输入合作的宝贝链接"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="合作的优惠卷链接"
                      v-if="form.type === '2'"
                    >
                      <el-input
                        v-model="form.coupon_url"
                        placeholder="请输入合作的优惠卷链接"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="要举报的QQ号" v-if="form.type === '3'">
                      <el-input
                        v-model="form.reported_qq"
                        placeholder="请输入要举报的QQ号"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="淘客手机号" v-if="form.type === '3'">
                      <el-input
                        v-model="form.reported_phone"
                        placeholder="请输入淘客手机号,没有可留空"
                      ></el-input>
                    </el-form-item>

                    <el-form-item label="是否在选品库发布过:">
                      <el-radio-group v-model="form.is_add" @change="objchange">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="2">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      :label="
                        form.type == 2 || form.type == 1
                          ? '有效合作证据截图'
                          : '不诚信证据截图'
                      "
                    >
                      <div>
                        <div
                          style="display:flex;justify-content:flex-start;align-items:center"
                        >
                          <div style="width:150px;height:120px">
                            <!-- action="http://192.168.0.105:80/upload" -->
                            <el-upload
                              class="avatar-uploader"
                              action="http://gyapi.letuilm.com/upload"
                              :on-success="handleAvatarSuccess"
                              :on-remove="handleRemove"
                              :limit="5"
                              :multiple="true"
                              :show-file-list="false"
                            >
                              <!-- list-type="picture" -->
                              <!-- :on-preview="handlePreview" -->
                              <!-- :before-upload="beforeAvatarUpload" -->
                              <!-- :file-list="dishonestList" -->
                              <div
                                style="width:120px;height:120px;border:1px solid #000;line-height:120px"
                              >
                                <i
                                  class="el-icon-plus avatar-uploader-icon"
                                ></i>
                              </div>
                            </el-upload>
                          </div>
                          <div style="height:122px">
                            <el-image
                              v-for="(item, index) in dishonestList"
                              :key="index"
                              style="width: 120px; height: 120px;"
                              :src="item"
                              :preview-src-list="dishonestList"
                            >
                            </el-image>
                          </div>
                        </div>
                        <div style="color:red">
                          最多可上传5张图片(截图请截大图)
                        </div>
                      </div>
                    </el-form-item>

                    <el-form-item label="恶意违规证据截图:">
                      <div>
                        <div
                          style="display:flex;justify-content:flex-start;align-items:center"
                        >
                          <div style="width:150px;height:120px">
                            <!-- action="http://192.168.0.105:80/upload" -->
                            <el-upload
                              class="avatar-uploader"
                              action="http://gyapi.letuilm.com/upload"
                              :on-success="handleAvatarSuccess2"
                              :on-remove="handleRemove2"
                              :limit="5"
                              :multiple="true"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <!-- list-type="picture" -->
                              <!-- :on-preview="handlePreview" -->
                              <!-- :file-list="dishonestList" -->
                              <div
                                style="width:120px;height:120px;border:1px solid #000;line-height:120px"
                              >
                                <i
                                  class="el-icon-plus avatar-uploader-icon"
                                ></i>
                              </div>
                            </el-upload>
                          </div>
                          <div style="height:122px">
                            <el-image
                              v-for="(item, index) in violationList"
                              :key="index"
                              style="width: 120px; height: 120px;"
                              :src="item"
                              :preview-src-list="violationList"
                            >
                            </el-image>
                          </div>
                        </div>
                        <div style="color:red">
                          最多可上传5张图片(截图请截大图)
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item label="您的联系电话">
                      <el-input
                        v-model="form.report_phone"
                        placeholder="请输入您的联系电话"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="您的联系QQ">
                      <el-input
                        v-model="form.report_qq"
                        placeholder="请输入您的QQ"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="举报理由">
                      <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入举报理由,并详细说明情况"
                        v-model="form.report_desc"
                        maxlength="500"
                        show-word-limit
                      >
                      </el-input>
                    </el-form-item>

                    <el-form-item>
                      <el-button type="primary" @click="onSubmit"
                        >提交审核</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="black_footer">
        <div>
          商家黑名单—扫除不合规的商家，为淘客创建一个干净的推广环境!
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addBlack } from "@/api/user/user";
export default {
  name: "report",
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  data() {
    return {
      urlStr: "", //不诚信证据
      urlStre: "", //恶意违规urlStre
      dishonest_img: "",
      dishonestList: [], //不诚信证据
      // cooperationList: [], //有效合作证据截图
      violation_img: "",
      violationList: [], //违规证据
      form: {
        type: "1", //举报对象
        coupon_url: "", //优惠卷链接
        shop_name: "", //掌柜名
        goods_url: "", //合作的宝贝链接
        reported_qq: "", //举报的qq
        reported_phone: "", //举报的手机号
        is_add: "2", //是否上单过
        report_phone: "", //您的联系电话
        report_qq: "", //您的联系QQ
        report_desc: "", //原因
        cooperation_zj_img: "", //有效合作证据截图：最多五张
        violations_zj_img: "" //违规证据截图：最多五张
      }
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {
    objchange(val) {
      console.log(val);
      this.type = val;
    },
    // 提交
    onSubmit() {
      console.log("举报表单", this.form);
      addBlack({
        ...this.form
      })
        .then(res => {
          console.log("举报返回", res);
          if (res.code == 200) {
            this.$message.success("举报成功!");
            this.form = this.$options.data().form;
            this.dishonestList = [];
            this.violationList = [];
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          this.$message.success("举报失败!");
          console.log(err);
        });
    },
    // 上传不诚信||合作截图
    handleAvatarSuccess(res, file, fileList) {
      console.log("不诚信图||合作", res, file.raw);
      console.log("返回fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        this.dishonestList = [];
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStr += fileList[i].response.data.url + ",";
          this.dishonestList.push("http://" + fileList[i].response.data.url);
        }
      }
      this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
      this.form.cooperation_zj_img = this.urlStr;
      console.log("不诚信图||合作", this.dishonestList);
      console.log("不诚信图||合作", this.urlStr);
    },
    // 上传违规图
    handleAvatarSuccess2(res, file, fileList) {
      console.log("违规图", res, file.raw);
      console.log("返回fileList", fileList);
      this.urlStre = "";
      if (fileList.length > 0) {
        this.violationList = [];
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStre += fileList[i].response.data.url + ",";
          this.violationList.push("http://" + fileList[i].response.data.url);
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1);
      this.form.violations_zj_img = this.urlStre;
      console.log("违规", this.urlStre);
      console.log("违规", this.violationList);
    },
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log("相关图file", file);
      console.log("相关图fileList", fileList);
      this.urlStr = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStr += fileList[i].response.data.url + ",";
        }
      }
      this.urlStr = this.urlStr.substring(0, this.urlStr.length - 1);
      console.log("urlStr", this.urlStr);
    },
    handleRemove2(file, fileList) {
      console.log("恶意违规", file);
      console.log("恶意违规List", fileList);
      this.urlStre = "";
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStre += fileList[i].response.data.url + ",";
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1);
      console.log("恶意违规urlStre", this.urlStre);
    },
    handlePreview(file) {
      console.log("相关图", file);
    },
    handlePreview2(file) {
      console.log("恶意违规", file);
    }
  }
};
</script>

<style lang="less" scoped>
.report {
  width: 100%;
  background-color: #fafaf9;
  .report_main {
    width: 100%;
    margin: 0 auto;
    background-color: #f6f6f6;
    .taberBox {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #fff;
      .topbar {
        width: 80%;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .titleBox {
      width: 100%;
      .title {
        // width: 1800px;
        letter-spacing: 14px;
        font-size: 30px;
        text-align: center !important;
        display: block;
        box-sizing: border-box;
        color: #333;
        margin: 50px auto;
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial,
          "Microsoft YaHei", FreeSans, Arimo, "Droid Sans",
          "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3",
          FontAwesome, sans-serif;
      }
      .titleX {
        width: 1800px;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 40px;
        hr {
          width: 180px;
          border-top: 2px solid #333;
          margin: 0;
          box-sizing: content-box;
          margin: 0 auto;
        }
        div {
          width: 40px;
          font-size: 30px;
          margin: 0 auto;
          margin-top: -20px;
          background-color: #f6f6f6;
          font-family: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi,
            BiauKai, FontAwesome, serif;
        }
      }
    }
    .report_info {
      width: 100%;
      .report_box {
        // width: 1000px;
        margin: 0 auto;
        .report_top {
          text-align: left;
        }
        .rule_box {
          // width: 1000px;
          text-align: left;
          margin: 0 auto;
          // background-color: #eef4f9;
          padding: 15px;
          .ruletop {
            font-size: 18px;
            font-weight: 600;
          }
        }
        .report_fillin {
          margin-top: 20px;
          .report_form {
            width: 50%;
            text-align: left;
          }
        }
      }
    }
    .black_footer {
      margin-top: 10px;
      font-size: 18px;
    }
  }
}
</style>
